import React, {FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
import SelectTreeTransfer from "../../module/dataForm/SelectTreeTransfer.tsx";
import {Button, Input, Spin} from "antd";
import "./css/IssueModal.less";
import useStateRef from "../../customUse/useStateRef.tsx";
import {useTranslation} from "react-i18next";
import {closeModal, updataModalFooter} from "../../services/ModalService.tsx";
import {createFetchParams, getObjByRule, getParams, isString} from "../../utils";
import {AxiosSer} from "../../services/HttpService.tsx";
import Config from "../../Config.tsx";
import CTable from "../../global/table/CTable.tsx";

interface IssueModalProps {
    modalKey: string,
    view: string,
    transferApi: any,
    rightTopTableProps: any,
    rightTopExtend: any,
    rightBottomTableProps: any,
    rightBottomExtend: any,
    bottomTableProps: any,
    bottomExtend: any,
    commentKey: string,
    rightName: string,
    rightValKey: string,
    url: string,
    method: string
}

const IssueModal: FC<IssueModalProps> = (props) => {

    const {t} = useTranslation();

    const transferRef = useRef(),
        rightTopTableRef = useRef(),
        rightBottomTableRef = useRef(),
        bottomTableRef = useRef(),
        commentRef = useRef("");

    const [loading, setLoading] = useState<boolean>(false),
        [comment, setComment] = useStateRef("", commentRef);

    const getTableParams = useCallback((params, extend, refDom) => {
        const {pName = "", valKey = "", isBatch} = extend;
        if (refDom && pName) {
            const selectedData = refDom?.getTableSelectedRows();
            if (isString(valKey)) {
                params[pName] = isBatch === false ? getParams(selectedData[0], valKey) : selectedData.map((item: any) => (getParams(item, valKey)));
            } else {
                params[pName] = isBatch === false ? getObjByRule(selectedData[0], valKey, false) : selectedData.map((item: any) => (getObjByRule(item, valKey, false)));
            }
        }
    }, [])

    const onOk = useCallback(async () => {
        const selectData = transferRef.current?.getSelectRows() || [];
        const {rightTopExtend = {}, rightBottomExtend = {}, bottomExtend = {}, commentKey = "remark"} = props;
        const {params = {}} = createFetchParams({...props, selectData});
        getTableParams(params, rightTopExtend, rightTopTableRef.current);
        getTableParams(params, rightBottomExtend, rightBottomTableRef.current);
        getTableParams(params, bottomExtend, bottomTableRef.current);
        setLoading(true);
        const {isMessBool = true} = props;
        const result = await AxiosSer(props.url, props.method || "POST", {
            ...params,
            [commentKey]: commentRef.current,
            [Config.axiosSerMenuKey]: props.menuId
        }, isMessBool);
        setLoading(false);
        result.code == "1" && await closeModal(props.modalKey, async () => {
            return result;
        });
    }, []);

    useEffect(() => {
        const btns = [
            <Button type="primary" onClick={onOk}>{t("determine")}</Button>,
            <Button key="cancel"
                    onClick={() => {
                        closeModal(props.modalKey, false)
                    }}>{t("cancel")}</Button>]
        updataModalFooter(props.modalKey, btns)
    }, []);

    const renderLeftIssueModal = useMemo(() => {
        const {
            view = "col_common_name_list",
            transferApi = {}
        } = props;
        return (<div className="sf_core_issue_modal_left">
            <div className="sf_core_issue_modal_transfer">
                <SelectTreeTransfer
                    init={transferRef}
                    {...transferApi}
                    view={view}
                    height={390}
                />
            </div>
            <div className="sf_core_issue_modall_desc">
                <div className="sf_core_issue_modal_desc_label">
                    <span>{t("comments")}</span>
                    <span style={{color: "red", marginLeft: 20}}>{t("notExceed")}</span>
                </div>
                <Input.TextArea value={comment} onChange={(e) => (setComment(e.target.value))} rows={4}/>
            </div>
        </div>)
    }, [props, comment]);

    const renderRightTopIssueModal = useMemo(() => {
        if (!props.rightTopTableProps) {
            return null
        }
        const {rightTopTableProps = {}} = props;
        if (!rightTopTableProps.tableApi) {
            return null
        }
        const {tableApi = {}} = rightTopTableProps;
        let newTableApi: any = {};
        if (tableApi.params) {
            newTableApi = {
                ...tableApi,
            }
            newTableApi.params = getObjByRule(props, tableApi.params)
            rightTopTableProps.tableApi = newTableApi;
        }
        return (
            <div className="sf_core_issue_modal_right_top">
                <CTable
                    {...rightTopTableProps}
                    init={rightTopTableRef}
                    height={props.rightBottomTableProps ? 250 : 510}
                    hasCheckbox={true}
                />
            </div>
        )
    }, [props]);

    const renderRightBottomIssueModal = useMemo(() => {
        if (!props.rightBottomTableProps) {
            return null
        }
        const {rightBottomTableProps = {}} = props;
        if (!rightBottomTableProps.tableApi) {
            return null
        }
        const {tableApi = {}} = rightBottomTableProps;
        let newTableApi: any = {};
        if (tableApi.params) {
            newTableApi = {
                ...tableApi,
            }
            newTableApi.params = getObjByRule(props, tableApi.params)
            rightBottomTableProps.tableApi = newTableApi;
        }
        return (
            <div className="sf_core_issue_modal_bottom_top">
                <CTable
                    {...rightBottomTableProps}
                    init={rightBottomTableRef}
                    height={props.rightTopTableProps ? 250 : 510}
                    hasCheckbox={true}
                />
            </div>
        )
    }, [props]);

    const renderRightIssueModal = useMemo(() => {
        return (
            <div className="sf_core_issue_modal_right">
                {renderRightTopIssueModal}
                {renderRightBottomIssueModal}
            </div>
        )
    }, [props]);

    const renderBottomIssueModal = useMemo(() => {
        if (!props.bottomTableProps) {
            return null
        }
        const {bottomTableProps = {}} = props;
        if (!bottomTableProps.tableApi) {
            return null
        }
        const {tableApi = {}} = bottomTableProps;
        let newTableApi: any = {};
        if (tableApi.params) {
            newTableApi = {
                ...tableApi,
            }
            newTableApi.params = getObjByRule(props, tableApi.params)
            bottomTableProps.tableApi = newTableApi;
        }
        return (
            <div className="sf_core_issue_modal_bottom">
                <CTable
                    {...bottomTableProps}
                    init={bottomTableRef}
                    height={190}
                    hasCheckbox={true}
                />
            </div>
        )
    }, [props]);

    const renderIssueModal = useMemo(() => {
            return (
                <Spin spinning={loading} wrapperClassName="sf_core_issue_modal">
                    <div className="sf_core_issue_modal_box">
                        {renderLeftIssueModal}
                        {renderRightIssueModal}
                    </div>
                    {renderBottomIssueModal}
                </Spin>
            )
        }, [props, comment]
    )
    return (renderIssueModal);
}


export default React.memo(IssueModal);